var packageA = document.getElementById('packageA');
var packageB = document.getElementById('packageB');
var packageC = document.getElementById('packageC');
var packageD = document.getElementById('packageD');
var packageE = document.getElementById('packageE');

function PopupBox() {
  this._background = null;
  this._container = null;
};

PopupBox._reset = function(pos) {
  var _self = this;
  this._close();
  
  this._background = document.createElement('div');
  this._background.className = 'popupWhite';
  this._background.style.width = document.documentElement.clientWidth + 'px';
  this._background.style.height = document.documentElement.scrollHeight + 'px';
  document.body.appendChild(this._background);
  
  this._container = document.createElement('div');
  this._container.className = 'popupBase';
  this._container.style.top = this._position[1] + 'px';
  this._container.style.left = this._position[0] + 'px';
  this._background.appendChild(this._container);
  
  var posX = this._position[0];
  var posY = this._position[1];
  window.scrollTo(posX, posY);
};

PopupBox._open = function(container, options) {
  var table, tr, td, _self = this;

  this._position = (options && options.pos) ? options.pos : [(document.documentElement.clientWidth - 618) / 2, (document.documentElement.scrollTop)];
  
  this._pop = (options && options.pop) ? options.pop : null;
  this._reset();

  table = document.createElement('table');
  table.cellPadding = 0;
  table.cellSpacing = 0;
  tr = table.insertRow(-1);
  td = tr.insertCell(-1);
  td.appendChild(container);
  this._container.appendChild(table);
};

PopupBox._close = function() {
  if (this._background) {
    document.body.removeChild(this._background);
    this._background = null;
    this._container = null;
    packageA.src = 'enquire/button_blue.png';
    packageB.src = 'enquire/button_blue.png';
    packageC.src = 'enquire/button_blue.png';
    packageD.src = 'enquire/button_blue.png';
    packageE.src = 'enquire/button_blue.png';
  }
};


  packageA.onclick = function() { var div = document.createElement('div');
                                  createElements(div, 'A', '295');
                                  PopupBox._open(div);
                                  date();
                                  this.src = 'enquire/button_black.png';
                                };
  packageB.onclick = function() { var div = document.createElement('div');
                                  createElements(div, 'B', '425');
                                  PopupBox._open(div);
                                  date();
                                  this.src = 'enquire/button_black.png';
                                };
  packageC.onclick = function() { var div = document.createElement('div');
                                  createElements(div, 'C', '685');
                                  PopupBox._open(div);
                                  date();
                                  this.src = 'enquire/button_black.png';
                                };
  packageD.onclick = function() { var div = document.createElement('div');
                                  createElements(div, 'D', '995');
                                  PopupBox._open(div);
                                  date();
                                  this.src = 'enquire/button_black.png';
                                };
  packageE.onclick = function() { var div = document.createElement('div');
                                  createElements(div, 'E', '1795');
                                  PopupBox._open(div);
                                  date();
                                  this.src = 'enquire/button_black.png';
                                };
                                
 function createElements(div, tag, price) {
    var table = document.createElement('table');
    table.cellpadding = 0;
    table.cellspacing = 0;
    table.style.marginTop = '-30px';
    table.style.width = '500px';
    table.style.height = '350px';
    table.className = 'pop_table';
    div.id = 'pop_div';
    div.appendChild(table);

    tr = table.insertRow(-1);
    td = tr.insertCell(-1);
    td.style.height = '350px';
    var top = document.createElement('table');
    top.cellpadding = 0;
    top.cellspacing = 0;
    top.style.width = '500px';
    top.style.height = '350px';
    td.appendChild(top);
    tr1 = top.insertRow(-1);
    td1 = tr1.insertCell(-1);
    td1.style.width = '180px';
    td1.style.textAlign = 'left';
    td1.style.verticalAlign = 'top';
    td1.className = 'td4';
    td1.style.paddingTop = '5px';
    td1.innerHTML = '<p>PORTRAIT</p><p>PHOTO</p><p>PACKAGE ' + tag + '</p>' + ' <p><span style="font-weight: bold">$' + price + '</span><span style="font-size: 15px"><sub> inc.GST</sub></span></p>';
    var cancel = document.createElement('img');
    cancel.src = 'enquire/cancel.png';
    cancel.style.cursor = 'pointer';
    cancel.style.marginTop = '205px';
    cancel.onclick = function() { PopupBox._close(); };
    td1.appendChild(cancel);
    td1 = tr1.insertCell(-1);
    td1.style.width = '320px';
    td1.style.textAlign = 'left';
    td1.style.verticalAlign = 'top';
    td1.innerHTML = '<form action="enquire.php" target="frm_post" id="myform" name="myform" method="post" onsubmit="return checkpost()">' +
                    '<table id="branch" style="width: 320px"><tr><td><input type="radio" name="studio" value="sydney" onfocus = this.blur() onclick="check();" /></td><td class="branch1">Sydney</td>' + 
                    '<td><input type="radio" name="studio" value="melbourne" onfocus = this.blur() onclick="check();"/></td><td class="branch2">Melbourne</td>' + 
                    '<td><input type="radio" name="studio" value="brisbane" onfocus = this.blur() onclick="check();"/></td><td class="branch3">Brisbane</td></tr></table>' + 
                    '<table style="width: 320px; height: 300px">' +
                    '<tr><td class="left_td">Full Name</td><td class="right_td"><input id="name" name="name"></input></td></tr>' + 
                    '<tr><td class="left_td">Phone</td><td class="right_td"><input id="phone" name="phone"></input></td></tr>' + 
                    '<tr><td class="left_td">Suburb</td><td class="right_td"><input id="suburb" name="suburb"></input></td></tr>' + 
                    '<tr><td class="left_td">Your Email</td><td class="right_td"><input id="email" name="email"></input></td></tr>' + 
                    '<tr><td class="left_td" colSpan = 2>Preferred Date<input id="date" name="date" value=""></input></td></tr>' + 
                    '<tr><td class="left_td" colSpan = 2>Additional Details</td></tr>' + 
                    '<tr><td class="left_td" colSpan = 2><textarea id="detail" name="detail" value=""></textarea></td></tr>' + 
                    '<tr><td align="right" colSpan = 2 style="padding-top: 5px"><input id="reset" type="reset" value=""></input><input id="send" type="button" value="" onclick="saveUserInfo()"></input></td></tr>' + 
                    '</table></form>';
    tr = table.insertRow(-1);
    td = tr.insertCell(-1);
    td.style.height = '30px';
    td.innerHTML = '<div id="remind"></div>';
 };
 
function date() {
  var datetext = document.getElementById('date');
  var d = new Date();
  datetext.value = fmtDigits(d.getDate()) + '/' + fmtDigits(d.getMonth() + 1) + '/' + d.getFullYear();
}
function fmtDigits(num) {
  num = parseInt(num, 10);
  return (num < 10) ? ('0' + num) : num;
};

function check() {
  var branch = document.getElementById('branch');
  var remind = document.getElementById('remind');
  branch.style.border = 'none';
  remind.innerHTML = '';
};

function removeChildElements(elem) {
  while (elem && elem.firstChild) {
    elem.removeChild(elem.firstChild);
  }
};

function InitAjax() {
  var ajax=false;
  try {
    ajax = new ActiveXObject("Msxml2.XMLHTTP");
  } catch (e) {
    try {
      ajax = new ActiveXObject("Microsoft.XMLHTTP");
    } catch (E) {
      ajax = false;
    }
  }
  if (!ajax && typeof XMLHttpRequest!='undefined') {
    ajax = new XMLHttpRequest();
  }
  return ajax;
}

function saveUserInfo() {
  var remind = document.getElementById('remind');
  var branch = document.getElementById('branch');
  var div = document.getElementById('pop_div');
  
  var f = document.myform;
  
  var num=0;
  for (var i=0; i < f.studio.length; i++){
    if (f.studio[i].checked) {
      num++;
    }
  }
  if (num == 0) {
    branch.style.border = 'solid 2px #ff0000';
    remind.innerHTML = 'Please kindly select a branch';
    return false;
  }
  if (f.name.value == "") { 
    remind.innerHTML = 'Please kindly input your full name';
    return false;
  }
  if (f.phone.value == ""){
    remind.innerHTML = 'Please kindly input your phone number';
    return false;
  }
  if (f.suburb.value == ""){
    remind.innerHTML = 'Please kindly input your suburb';
    return false;
  }
  if (f.email.value == "" ) {
    remind.innerHTML = 'Please kindly input your email';
    return false;
  }
  if (f.detail.value == "") {
    remind.innerHTML = 'Please kindly input additional details';
    return false;
  }
  
  if (num != 0 && f.name.value != '' && f.phone.value != '' && f.suburb.value != '' && f.email.value != '' && f.detail.value != '') {
    var studio = '';
    for (var i=0; i < f.studio.length; i++){
      if (f.studio[i].checked) {
        studio = f.studio[i].value;
      }
    }
    var name = f.name.value;
    var phone = f.phone.value;
    var suburb = f.suburb.value;
    var date = f.date.value;
    var email = f.email.value;
    var detail = f.detail.value;
   
    //接收表单的URL地址
    var url = "mail.php";
  
    //需要POST的值，把每个变量都通过&来联接
    var postStr  = "&studio="+ studio + "&name="+ name +"&phone="+ phone +"&suburb="+ suburb +"&date="+ date +"&email="+ email +"&detail="+ detail;
  
    //实例化Ajax
    var ajax = InitAjax();
  
    //通过Post方式打开连接
    ajax.open("POST", url, true);
  
    //定义传输的文件HTTP头信息
    ajax.setRequestHeader("Content-Type","application/x-www-form-urlencoded");
  
    //发送POST数据
    ajax.send(postStr);
  
    //获取执行状态
    ajax.onreadystatechange = function() {
      //如果执行状态成功，那么就把返回信息写到指定的层里
      if (ajax.readyState == 4 && ajax.status == 200) {
        location.href = 'ethanks.php';
//        div.innerHTML = ajax.responseText;
//        removeChildElements(div);
//        var table = document.createElement('table');
//        table.cellpadding = 0;
//        table.cellspacing = 0;
//        table.style.margin = '7px 0 0 10px';
//        table.style.width = '600px';
//        table.style.height = '430px';
//        div.appendChild(table);
//        
//        tr = table.insertRow(-1);
//        td = tr.insertCell(-1);
//        td.style.height = '10px';
//        td.style.textAlign = 'right';
//        td.style.verticalAlign = 'top';
//        var close = document.createElement('img');
//        close.src = 'enquire/close.png';
//        close.style.cursor = 'pointer';
//        close.onclick = function() { location.href='enquirethanks.php' };
//        td.appendChild(close);
//        tr = table.insertRow(-1);
//        td = tr.insertCell(-1);
//        td.style.height = '340px';
//        td.id = 'success';
//        td.appendChild(document.createTextNode('Now Sending Your Email, Please Wait...!'));
//        var func1 = function() { location.href='enquirethanks.php'};
//        setTimeout(func1, 5000);
      }
    }
  }
};